<template>
    <div class="page-container">
        <div class="page-row">
            <el-button type="primary" size="small" @click="addPagesUrl">添加路径</el-button>
            <el-button type="danger" :disabled="delList.length == 0" size="small" @click="btnRemoveBath">批量删除</el-button>
        </div>
        <el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="templateName" label="模板" />
            <el-table-column prop="pageName" label="页面标题" />
            <el-table-column prop="pageUrl" label="页面地址" />
            <!-- <el-table-column prop="status" label="状态" >
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="'1'" :inactive-value="'0'"
                        :active-text="scope.row.status == '0' ? '禁用' : '启用'"></el-switch>
                </template>
            </el-table-column> -->
            <el-table-column fixed="right" width="200px" label="操作">
                <template #default="scope">
                    <el-button size="small" link type="primary" @click="showUpdate(scope.row)">编辑</el-button>
                    <el-button size="small" link type="primary" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-block">
            <el-pagination v-model:currentPage="queryParam.current" v-model:page-size="queryParam.size"
                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="false"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 添加弹框 -->
        <el-dialog v-model="showAddModal" :title="title" center>
            <el-form :model="pagesUrl" label-width="120px">
                <el-form-item label="小程序模板">
                    <el-select v-model="pagesUrl.templateId" placeholder="请选择" >
                        <el-option v-for="item in tempList" :key="item.id" :label="item.tempName" :value="item.id" @click="selectTemp(item)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="页面标题" label-width="120px">
                    <el-input v-model="pagesUrl.pageName" />
                </el-form-item>
                <el-form-item label="页面路径" label-width="120px">
                    <el-input v-model="pagesUrl.pageUrl" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button :disabled="pagesUrl == null" @click="submit" type="primary">保 存</el-button>
                    <el-button @click="showAddModal = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, toRefs, onMounted, ref } from 'vue'
import { pagesApi } from '/@/api/sms/pages/index'

export default {
    name: "pages",
    setup() {
        const api = pagesApi()
        const state = reactive({
            list: [], // 列表数据
            total: 0, // 总条数
            pagesUrl: {}, // 添加的数据
            oldData: {}, // 原数据
            delList: [], // 选中的数据
            tempList: [], // 模板数据
            title: '', // 控制头
            showAddModal: false, // 弹窗显示控制
            queryParam: {
                current: 1, // 当前页
                size: 10,   // 页大小
            },
        })
        onMounted(() => {
            getList()
            getTempList()
        })
        // 获取列表数据
        const getList = () => {
            api.getList(state.queryParam).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 获取模板
        const getTempList = () => {
            api.getTempList().then(res => {
                state.tempList = res.data
            })
        }
        // 显示添加数据弹窗
        const addPagesUrl = () => {
            state.title = '添加路径'
            state.pagesUrl = {}
            state.showAddModal = true
        }
        // 显示编辑数据弹窗
        const showUpdate = (val) => {
            state.title = '编辑路径'
            state.oldData = JSON.parse(JSON.stringify(val))
            state.pagesUrl = JSON.parse(JSON.stringify(val))
            state.showAddModal = true
        }
        // 选中模板
        const selectTemp = (val) => {
            state.pagesUrl.templateName = val.tempName
        }
        // 点击提交
        const submit = () => {
            if (state.pagesUrl.id) {
                if (state.oldData.pageUrl === state.pagesUrl.pageUrl) {
                    delete state.pagesUrl.pageUrl
                }
                api.update(state.pagesUrl).then(res => {
                    getList()
                    ElMessage.success('编辑成功')
                    state.showAddModal = false

                })
            } else {
                api.create(state.pagesUrl).then(res => {                    
                    getList()
                    ElMessage.success('添加成功')
                    state.showAddModal = false
                })
            }
        }
        // 多选人员
        const handleSelectionChange = (val) => {
            state.delList = val.map(item => item.id)
        }
        // 批量删除
        const btnRemoveBath = () => {
            api.removeBath({ids: state.delList.join(",")}).then(res => {
                getList()
                ElMessage.success('删除成功')
            })
        }
        // 删除数据
        const remove = (val) => {
            api.removeBath({ids:val.id}).then(res => {
                getList()
                ElMessage.success('删除成功')
            })
        }
        // 条数修改
        const handleSizeChange = e => {
            state.queryParam.size = e
            getList()
        }
        // 页码修改
        const handleCurrentChange = e => {
            state.queryParam.current = e
            getList()
        }
        return {
            getList,
            remove,
            submit,
            selectTemp,
            showUpdate,
            getTempList,
            addPagesUrl,
            btnRemoveBath,
            handleSizeChange,
            handleCurrentChange,
            handleSelectionChange,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss"></style>